<template>
  <div>
    <div class="device_header">
      <HeaderNavigation
        :headerContent="headerContent"
        @selTabClick="selTabClick"
        @addDevice="addDevice"
      ></HeaderNavigation>
    </div>

    <div class="device_con" v-if="tabIndex === 2">
      <TableCommonView 
        :table-list="tableList" 
        @selCommonClick="selCommonClick" 
        @selTableCol="selTableCol">
        <template slot="tableButton">
          <el-table-column label="操作" width="80">
            <template slot-scope="scope">
              <el-button
                type="text"
                size="small"
                @click="btnEdit(scope.row)"
                style="margin-right: 5px; color: #328eff !important"
                >详情
                <!-- <i
                  style="transform: rotate(90deg); transform-origin: center center; color: #8291a9; font-size: 18px"
                  class="el-icon-more"
                ></i> -->
              </el-button>
            </template>
          </el-table-column>
        </template>
      </TableCommonView>
    </div>
    <div class="btn-pager" v-if="tabIndex === 2">
      <PagerView
        class="page"
        layout="sizes, prev, pager, next"
        v-on="pagerEvents"
        :pager-options="productPagerOptions"
        :pageSizes="productPagerOptions.pageSizeOption"
        @current-change="currentProductHandler"
        @size-change="productChangeHandler"
      />
    </div>
    <div class="map" v-if="tabIndex === 1">
      <h1>功能开发中,敬请期待...</h1>
      <!-- <DeviceAmap /> -->
    </div>
    <template>
      <DeviceDialog :editFormDialog="deviceDialogData"></DeviceDialog>
      <AddDeviceDialog :editFormDialog="addDeviceData"></AddDeviceDialog>
    </template>
  </div>
</template>

<script>
import { getDeviceList } from "@/api/deviceManage/deviceManage"
import HeaderNavigation from "@/views/deviceManage/devicePage/components/headerNavigation"
import DeviceDialog from "./components/deviceDialog.vue"
import AddDeviceDialog from "./components/addDeviceDialog.vue"
// import DeviceAmap from "./components/deviceAmap"
import pageMixin from "@/components/makepager/pager/mixin/pageMixin";

export default {
  name: "devicePage",
  mixins: [pageMixin],
  components: {
    HeaderNavigation,
    DeviceDialog,
    AddDeviceDialog
    // DeviceAmap
  },
  props: {},
  created() {
    this.setTable()
    this.getDeviceList({
      keyword: "",
      page: 1,
      pageSize: 15
    })
  },
  data() {
    return {
      headerContent: {
        title: "设备管理",
        infomation: {}
      },
      deviceDialogData: {
        visible: false,
        title: "设备详情",
        infomation: {}
      },
      addDeviceData: {
        visible: false,
        title: "设备认证",
        infomation: {}
      },
      tableList: {},
      tableColumn: [
        { label: "设备名称", prop: "name", min: 150, deviceName: true },
        { label: "IP地址", prop: "ipAddr" },
        { label: "小区", prop: "area" },
        { label: "具体位置", prop: "position" },
        { label: "设备箱编码", prop: "boxCode" },
        { label: "抓拍数量", prop: "captureNum" },
        { label: "温度", prop: "temperature" },
        { label: "设备心跳时间", prop: "heartTime" },
        { label: "经度", prop: "logitude" },
        { label: "纬度", prop: "latitude" },
        { label: "备注", prop: "comment" },
        { label: "安装时间", prop: "installTime" },
        { label: "状态", prop: "status", status: true }
        // { label: "操作", prop: "status", bindingOperation: true }
      ],
      showCol: ["设备名称", "IP地址", "小区", "抓拍数量", "温度", "设备心跳时间", "安装时间", "状态", "操作"],
      productPagerOptions: {
        currPage: 1,
        pageSize: 10,
        totalCount: 0
      },
      tabIndex: 2
    }
  },
  computed: {},
  mounted() {},
  watch: {},
  methods: {
    btnEdit(row) {
      console.log(row, "详情row")
      this.deviceDialogData.infomation = row
      this.deviceDialogData.visible = true
    },
    // 详情
    selCommonClick(row) {
      console.log(row, "详情")
    },
    setTable() {
      this.tableList = {
        tableInfomation: [],
        // selectIndex: true,
        showcol: this.showCol,
        allcol: [],
        // selectBox: true,
        tableColumn: this.setColumnVisible(this.showCol)
      }
      this.tableList.allcol = this.tableList.tableColumn.filter((ele) => !ele.default).map((ele) => ele.label)
    },
    selTableCol(val) {
      this.showcol = val
      this.tableList.tableColumn = this.setColumnVisible(val)
    },
    setColumnVisible(showCol) {
      return this.tableColumn.map((ele) => {
        return {
          ...ele,
          isShowColumn: showCol.includes(ele.label)
        }
      })
    },
    // 分页前后跳转
    currentProductHandler(val) {
      this.productPagerOptions.currPage = val
      // this.getPersonList({
      //   tableId:this.thatSync.id,
      //   page: this.productPagerOptions.currPage,
      //   size: this.productPagerOptions.pageSize,
      //   contentValue: "",
      //   orderType: "desc",
      //   orderName: "createTime",
      // })
    },
    // 分页条目选择
    productChangeHandler(val) {
      this.productPagerOptions.pageSize = val
      this.getDeviceList({
        keyword: "",
        page: 1,
        pageSize: this.productPagerOptions.pageSize
      })
      // this.getPersonList({
      //   tableId:this.thatSync.id,
      //   page: this.productPagerOptions.currPage,
      //   size: this.productPagerOptions.pageSize,
      //   contentValue: "",
      //   orderType: "desc",
      //   orderName: "createTime",
      // })
    },
    selTabClick(idx) {
      console.log(idx, "选择")
      this.tabIndex = idx
    },
    // 添加设备
    addDevice() {
      this.addDeviceData.visible = true
    },
    // 获取设备列表
    getDeviceList(params) {
      getDeviceList(params).then((res) => {
        let list = res.data.data.map((item) => {
          let hardware = {}
          if (item.hardware.length > 0) {
            hardware = JSON.parse(item.hardware)
          }

          return {
            ...item,
            status: item.status === 1 ? "在线" : "离线",
            // temperature: hardware.temp
          }
        })
        this.tableList.tableInfomation = list
        this.productPagerOptions.totalCount = res.data.total
      })
    }
  }
}
</script>

<style scoped lang="scss">
.device_con {
  margin-right: 20px;
  height: calc(100vh - 225px);
}
.list_pager {
  display: flex;
  justify-content: flex-end;
  margin-right: 20px;
  color: #fff;
}
.map {
  text-align: center;
  // margin-top: 100px;
  width: 100%;
  height: calc(100vh - 180px);
}
::v-deep {
  [data-v-1e876fb8] .el-table__row {
    height: 80px;
  }
  .el-table--border::after,
  .el-table--group::after,
  .el-table::before {
    background-color: #141415;
  }
  .el-pagination.is-background .btn-next,
  .el-pagination.is-background .btn-prev,
  .el-pagination.is-background .el-pager li {
    background-color: #1f2935;
  }
}
.btn-pager {
  width: calc(100% - 40px);
  justify-content: left;
  position: relative;
}
</style>
